<!DOCTYPE html>
<body>
<script>
    var imgLoad = function() {
        var node = document.body.getElementsByTagName("picture")[0];
        if (node) {
            document.body.removeChild(node);
            window.parent.postMessage("shrink", "*");
        }
    }

    var test = function () {
        var entries = performance.getEntriesByType("resource");
        var downloadedImages = 0;
        for (var i = 0; i < entries.length; ++i) {
            var entry = entries[i];
            if (entry.name.indexOf("base-image") != -1)
                ++downloadedImages;
        }
        return downloadedImages;
    }

    window.addEventListener("message", function(msg) {
        if (msg.data == "test")
            window.parent.postMessage("test_" + test(), "*");
    });
</script>
<picture>
    <source id=src srcset="base-image1.png" media="(max-width: 200px)">
    <img src="base-image2.png" onload="imgLoad()">
</picture>
</body>
